<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" >
<title>一生平安-注册</title>
<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-scroll.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-bar.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/dynamicPic.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/mobile.css" />
	<link type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.min.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery-1.6.4.min.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessage=false;
		$.mobile.selectmenu.prototype.options.nativeMenu = false;
		$.mobile.defaultPageTransition="none";
		$.mobile.listview.prototype.options.filterPlaceholder="";
	});
	</script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile-common.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/dynamicPic.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/YMDClass.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.i8n.CHN-S.utf8.js"></script>
</head>
<body>
	<div data-role="page" id="mobile-register-page" class="page-div-style">
		<script>
		$('#mobile-register-page').live('pagebeforeshow',function(){
			//显示头部栏
	 		initHeader($("#mobileRegisterHeader"),"back");
			//显示功能列表的头部标题名称
			$("#mobileRegisterHeader").find("[name='mobileHeaderTitle']").text("注册");
			
			//清空所有输入框
			$("#mobile-register-page").find("input[type='text']").val("");
			$("#mobile-register-page").find("input[type='password']").val("");
			
		});
		
		$('#mobile-register-page').live('pageshow',function(){
			$("#mobileRegisterScroller").css("min-height",window.innerHeight - $("#mobileRegisterHeader").height() +"px") ;
			
			new YMDselect('birthYear','birthMonth','birthDay');
		});
		
		var RegisterObj = new Object();
		
		//提醒效果
		RegisterObj.errorMsgShow = function(msg){
			$("#mobileRegister_msg").html(msg);
			jQuery.fx.interval = 5;
			$("#mobileRegister_msg").fadeIn('slow',function(){
				$("#mobileRegister_msg").fadeOut(1000);
			});
		}
		
		//验证注册
		function checkRegister(){
			//账号
			var userid = $.trim($("#mobile-register-page").find("#userid").val());
			if(userid.length > 20 || userid.length == 0){
				RegisterObj.errorMsgShow("账号长度： 0~20位！");
				return false;
			}
			//只运行汉字 英文 数字
			var patrn = /^[a-zA-Z0-9\u4e00-\u9fa5]*$/;
			if(!patrn.exec(userid)){
				RegisterObj.errorMsgShow("账号不能含特殊符号的中英文、数字！");
				return false;
			}
			
			//密码
			var password = $.trim($("#mobile-register-page").find("#password").val());
			if(password.length > 20 || password.length < 0){
				RegisterObj.errorMsgShow("密码长度： 0~20位！");
				return false;
			}
			
			//姓名
			var name = $.trim($("#mobile-register-page").find("#name").val());
			if(name.length > 10 || name.length < 2){
				RegisterObj.errorMsgShow("姓名长度： 2~10位！");
				return false;
			}
			
			//出生年月日
			var birthYear = $.trim($("#mobile-register-page").find("#birthYear").val());
			var birthMonth = $.trim($("#mobile-register-page").find("#birthMonth").val());
			var birthDay = $.trim($("#mobile-register-page").find("#birthDay").val());
			if(birthYear == "0" || birthMonth == "0" || birthDay == "0"){
				RegisterObj.errorMsgShow("年月日不能为空！");
				return false;
			}
			
			var email = $.trim($("#mobile-register-page").find("#email").val());
			var patrn = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
			if(!patrn.exec(email)){
				RegisterObj.errorMsgShow("E-Mail不合法！");
				return false;
			}
			
			// 
			var cellphone = $.trim($("#mobile-register-page").find("#cellphone").val());
			
			//只运行数字
			var patrn = /^[0-9]{11}$/;
			if(cellphone != "" && !patrn.exec(cellphone)){
				RegisterObj.errorMsgShow("手机号不合法！");
				return false;
			}
			
			return true;
		}
		
		//注册用户
		function doRegister(){
			//加载等待
			showLoadPage();
			
			if(!checkRegister()){
				//结束等待
				hideLoadPage();
				return false;
			}
			
			//账号
			var userid = $.trim($("#mobile-register-page").find("#userid").val());
			//密码
			var password = $.trim($("#mobile-register-page").find("#password").val());
			//真实姓名
			var name = $.trim($("#mobile-register-page").find("#name").val());
			var nickname = $.trim($("#mobile-register-page").find("#nickname").val());
			var birthYear = $.trim($("#mobile-register-page").find("#birthYear").val());
			var birthMonth = $.trim($("#mobile-register-page").find("#birthMonth").val());
			var birthDay = $.trim($("#mobile-register-page").find("#birthDay").val());
			var birthdate = birthYear + "-" + (birthMonth.length == 1 ? ("0" + birthMonth) : birthMonth)
				+ "-" + (birthDay.length == 1 ? ("0" + birthDay) : birthDay)
			var sex = $.trim($("#mobile-register-page").find("#sex").val());
			var email = $.trim($("#mobile-register-page").find("#email").val());
			var cellphone = $.trim($("#mobile-register-page").find("#cellphone").val());
			
			$.ajax({
                url:"yspaInterface/regditUserInfo.html",
                async: true,
                type:"POST",
                data:{"userid":userid,"name":name,"nickname":nickname,"birthdate":birthdate,"sex":sex,"email":email
                	,"cellphone":cellphone,"password":password},
                dataType:"json",
               	success:function(data){	
		            //结束等待
					hideLoadPage();
		            
		            if(data.success == true){
		            	indexObj.showMsgDialog("0","注册成功！",function(){
		            		window.location.href = "${ctx}/mobile/login.html";
		            	});
		       		} else{
		       			if(data.msg != null){
			       			indexObj.showMsgDialog("0",data.msg);
		       			} else {
		       				indexObj.showMsgDialog("0","注册失败！");
		       			}
		       		}
        		},
        		error:function(){
	        		//操作 连接超时
	        		doConnectionFail();
	       		}
            });
		}
		</script>
		<div id="indexMsg" style="display: none;">
			<div style="position:absolute;width:100%;height:100%;top:0;z-index:50;opacity: 0.5;background-color: black;">
			</div>
			<div style="position:absolute;width:100%;height:100%;top:0;z-index:100;" id="index_showBox">
				<div class="msgbox">
					<div class="tips">提示</div>
					<div class="btnarea">
					</div>
					<div class="btn">
						<div class="div_login" align="center" id="index_showBtn" onclick="indexObj.hideMsgDialog()">
							<div>确定</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="mobileRegister" class="body_content">
			<div align="center" data-role="header" data-theme="b"  data-position="" id="mobileRegisterHeader">
			</div>
			<div id="mobileRegister_msg" class="div_content_06" style="display: none;"></div>
			<div data-role="content" id="mobileRegisterWrapper" style="padding:0;margin: 0px;" class="jszx-wrapper">
				<div id="mobileRegisterScroller" class="jszx-scroller" style="background: url(${ctx}/lib/mobile/image/reg-bg.png) no-repeat;
				background-size: cover;">
					<div style="height:20px;"></div>
					<div align="center" class="div_content_08">
						<table class="table_list_01">
							<tr>
								<td>账号</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="text" autocomplete="off" data-role="none" class="input_text" name="userid" 
											id="userid" value="" placeholder="账号">
										<input name="userid_bak" style="height: 0px;padding: 0;border: 0;">
									</div>
								</td>
							</tr>
							<tr>
								<td>密码</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="password" data-role="none" class="input_text" name="password" 
											id="password" placeholder="6~20位字母或数字">
										<input type="password" name="password_bak" style="height: 0px;padding: 0;border: 0;">
									</div>
								</td>
							</tr>
							<tr>
								<td>真实姓名</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="text" data-role="none" class="input_text" name="name" 
											id="name" value="" placeholder="真实姓名">
									</div>
								</td>
							</tr>
							<tr>
								<td>昵称</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="text" data-role="none" class="input_text" name="nickname" 
											id="nickname" value="" placeholder="昵称">
									</div>
								</td>
							</tr>
							<tr>
								<td>出生年月</td>
								<td>
									<select name="birthYear" id="birthYear" data-role="none" style="width: 80px;
									    height: 30px;
									    font-family: 黑体;
									    border-radius: 8px;
									    background-color: white;">
									</select>
									<select name="birthMonth" id="birthMonth" data-role="none" style="width: 60px;
									    height: 30px;
									    font-family: 黑体;
									    border-radius: 8px;
									    background-color: white;">
									</select>
									<select name="birthDay" id="birthDay" data-role="none" style="width: 60px;
									    height: 30px;
									    font-family: 黑体;
									    border-radius: 8px;
									    background-color: white;">
									</select>
								</td>
							</tr>
							<tr>
								<td>性别</td>
								<td>
									<select name="sex" id="sex" data-role="none" style="width: 100px;
    height: 30px;
    font-family: 黑体;
    border-radius: 8px;
    background-color: white;">
										<option value="M">男</option>
										<option value="F">女</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>E-Mail</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="email" data-role="none" class="input_text" name="email" 
											id="email" value="" placeholder="E-Mail">
									</div>
								</td>
							</tr>
							<tr>
								<td>手机</td>
								<td>
									<div class="div_input ui-body-d" style="border: 0;">
										<input type="number" data-role="none" class="input_text" name="cellphone" 
											id="cellphone" value="" placeholder="手机">
									</div>
								</td>
							</tr>
						</table>
						<table class="table_list_02">
							<tr>
								<td>
									<div class="div_login" align="center" id="mobileRegisterBtn" onclick="doRegister();">
										<div>注册</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>